<template>
	<div class="resource_comment" style="overflow: auto">
		<div class="list" v-infinite-scroll="loadCommentData" infinite-scroll-disabled="isDisabled">
			<div class="comement_item" v-for="i in commentCount">
				<div class="info">1232</div>
				<div class="reply">13123</div>
			</div>
		</div>
		<div class="loading" v-if="commentLoading">
			<i el-icon-loading></i>
			加载中
		</div>
		<div class="nomore" v-if="isNomore">没有更多评论了</div>
	</div>
</template>

<script>
import { getEvaluateList } from '@/api/front/sysEvaluate';
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10
			},
			commentCount: 0,
			commentLoading: false,
			commentListData: []
		};
	},
	computed: {
		isNomore() {
			return this.listQuery.page * this.listQuery.limit >= this.commentCount;
		},
		isDisabled() {
			return this.commentLoading || this.isNomore;
		}
	},
	methods: {
		//加载评论数据
		async loadCommentData() {
			console.log('12323');
			this.commentLoading = true;
			this.listQuery.page++;
			await this.requestCommentData();
			this.commentLoading = false;
		},

		//请求评论列表
		async requestCommentData() {
			let params = { ...this.listQuery };
			let result = await getEvaluateList(params).then(res => res.data);
			if (result.code === '0') {
				this.commentCount = parseInt(result.count);
				this.commentListData = !result.data ? [] : result.data;
			}
			console.log(result);
		}
	}
};
</script>

<style lang="scss" scoped>
.comement_item {
	.loading,
	.nomore {
		border-top: solid 1px #dcdfe6;
	}
}
</style>
